<template>
    <div class="article-lists">
		<el-card class="!border-none" shadow="never">
             <div>
                <el-button type="primary" class="mb-4" @click="handleAdd">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    添加使用者
                </el-button>
            </div>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="120" />
                <el-table-column label="使用人" min-width="180" prop="name"/>
                <el-table-column label="登录账号" min-width="180" prop="account"/>
                <el-table-column label="创建时间" min-width="190" prop="create_time"/>
                <el-table-column label="使用状态" min-width="190" prop="login_time">
                    <template #default="{ row }">
                        <el-switch v-model="row.disable" @change="togglePaid(row.id, row.disable)" :active-value="0" :inactive-value="1" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
                        <el-button type="primary" link @click="handleLink(row)">查看链接</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <popup ref="popupRef" :title="formData.id?'编辑用户':'添加用户'" width="500px" @confirm="handleConfirm" :async="true" @close="popupClose">
            <el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
                <el-form-item label="使用人" prop="name">
                    <el-input v-model="formData.name" placeholder="请填写使用人" />
                </el-form-item>
                <el-form-item label="登录账号" prop="account">
                    <el-input v-model="formData.account" minlength="6" placeholder="请填写登录账号" />
                    密码默认与账号一致
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                    <div class="w-80">
                        <div>
                            <material-picker v-model="formData.avatar" :limit="1"/>
                        </div>
                        <div class="form-tips">建议尺寸：200*200px</div>
                    </div>
                </el-form-item>
            </el-form>
        </popup>

        <el-dialog v-model="recordVisible" title="大屏网址" width="600">
            <div class="flex">
                <div class="flex-left mr-2">大屏网址</div>
                <div>
                    <div class="flex-num mb-2">可讲大屏网址复制给购买用户</div>
                    <div class="flex-link mb-2">大屏网址：{{ link }}<el-link class="flex-m" type="primary" icon="el-icon-document-copy" :underline="false" v-copy="link">复制</el-link></div>
                    <div class="flex-link mb-2">大屏后台管理网址：{{ adminlink }}<el-link class="flex-m" type="primary" icon="el-icon-document-copy" :underline="false" v-copy="adminlink">复制</el-link></div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="()=>{recordVisible = false}">取消</el-button>
                    <el-button type="primary" v-copy="link">复制链接</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<script lang="ts" setup name="screen">
import { adminList, saveAdmin, adminInfo, setDisable } from '@/api/screen'
import { usePaging } from '@/hooks/usePaging'
import type { FormInstance, FormRules } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback';

const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const queryParams:any = reactive({

})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: adminList,
    params: queryParams
})

getLists()

const handleAdd = () => {
    popupRef.value?.open()
}
const handleEdit = async (row: any) => {
    const data = await adminInfo({id: row.id})
    console.log(data)
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data.info[key]
    })
    popupRef.value?.open()
}
const togglePaid = async (id: any, status:any) => {
    console.log(id, status)
    await setDisable({
        id: id,
        disable: status
    })
    // feedback.msgSuccess('修改成功')
    getLists()
}
const formRules: FormRules = {
    name: [{required: true, message: '请填写使用人' }],
    avatar: [{required: true, message: '请上传头像' }],
    account: [
        {required: true, message: '请填写账号' },
        { min: 6, message: '最少长度6位', trigger: 'blur' },
    ]
}
const formData:any = reactive({
    id: 0,
    name: '',
    avatar: '',
    account: '',
    password: ''
})
const handleConfirm = async () => {
    try {
        await formRef.value?.validate()
        formData.password = formData.account;
        await saveAdmin(formData);
        popupRef.value?.close()
        getLists();
    } catch (error) {
        
    }
}
const popupClose = () => {
    formRef.value?.resetFields()
    formData.id = 0;
}
const link = ref('')
const adminlink = ref('')
const handleLink = (row:any) => {
    link.value = row.link;
    adminlink.value = row.adminlink;
    recordVisible.value = true;
}
const recordVisible = ref(false)


</script>
<style lang="scss" scoped>

</style>